<template>
    <div :class="`special-shop-desc ${mode} ${styleMode}`" @click="clickAction">
        <div class="shop-logo">
            <img class="logo-value" :src="imageSrc" alt="">
        </div>
        <div class="shop-info">
            <div class="shop-name title-color">{{ shopInfo.name }}</div>
            <div class="shop-desc">{{ shopInfo.desc }}</div>
        </div>
        <div v-if="isLink" class="link-container">
            <MiniIcon name="right" :size="16" :mode="mode" :styleMode="styleMode" theme="#7D7D83" />
        </div>
    </div>
</template>

<script>
import { MiniIcon } from '@components/base';
import ModeMixin from '@common/mixin';
import { createShopImageSrc } from '@common/utils';
export default {
    name: 'ShopDesc', // 店铺描述
    mixins: [ModeMixin],
    components: {
        MiniIcon,
    },
    props: {
        shopInfo: {
            type: Object,
            default() {
                return {};
            },
        },
        isLink: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        imageSrc() {
            const { shopInfo } = this.$props;
            return createShopImageSrc(shopInfo.logo);
        },
    },
    methods: {
        clickAction() {
            const { isLink, shopInfo } = this.$props;
            if (isLink) {
                this.$router.push(`/shop/special/${shopInfo.id}`);
            }
        },
    },
};
</script>

<style lang="less">
.special-shop-desc {
    .p(@shop-gap-md);
    .flex();
    justify-content: space-between;
    align-items: center;
    &.circle {
        .shop-logo {
            border-radius: @shop-border-radius;
        }
    }
    .is-self-support {
        width: 30px;
        height: 16px;
        font-size: 11px;
        line-height: 16px;
        .t-c();
        background-color: @shop-price-color;
        color: @white;
        border-radius: @border-radius / 2;
        .m-t(@gap-sm);
    }
    .shop-logo {
        width: 36px;
        height: 36px;
        overflow: hidden;
        .logo-value {
            width: 100%;
            height: 100%;
        }
    }
    .shop-info {
        .m-l(@shop-gap);
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .shop-name {
            font-size: @font-size-md;
            font-weight: 500;
        }
        .shop-desc {
            font-size: @shop-font-size;
            color: @tip-color;
        }
    }
}
</style>
